<template>
	<view>
		<view class='order-details'>
			<!-- <view class='header bg-color acea-row row-middle'>
				<view class='iconfont icon-fapiao1'></view>
				<view class='data'>
					<view class='state'>{{invoiceInfo.is_invoice===0 ? '未开票' : '已开票'}}</view>
					<view>{{invoiceInfo.add_time}}</view>
				</view>
			</view> -->
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper">
					<view style="font-size:34rpx;">{{invoiceInfo.type === 1 ? '普通发票' : '增值税专用发票'}}</view>
					<view class="conter" style="width:auto;font-size:34rpx; color:#95C51B"
						:style="{color:invoiceInfo.is_invoice===1 ?'#95C51B':''}">
						{{invoiceInfo.is_invoice===0 ? '未开票' : '已开票'}}</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper">
					<view>{{invoiceInfo.header_type === 2?"公司名称":"发票抬头"}}</view>
					<view class="conter">{{invoiceInfo.name}}</view>
				</view>
				<!-- <view v-if="invoiceInfo.header_type === 2 && invoiceInfo.duty_number" class="item acea-row row-between-wrapper">
					<view>公司名称</view>
					<view class="conter">{{invoiceInfo.duty_number}}</view>
				</view> -->
				<view v-if="invoiceInfo.header_type === 2 && invoiceInfo.duty_number" class="item acea-row row-between-wrapper">
					<view>公司税号</view>
					<view class="conter">{{invoiceInfo.duty_number}}</view>
				</view>
				<view v-if="invoiceInfo.type === 2 && invoiceInfo.address && isopen" class="item acea-row row-between-wrapper">
					<view>公司地址</view>
					<view class="conter">{{invoiceInfo.address}}</view>
				</view>
				<view v-if="invoiceInfo.type === 2 && invoiceInfo.tell && isopen" class="item acea-row row-between-wrapper">
					<view>公司电话</view>
					<view class="conter">{{invoiceInfo.tell}}</view>
				</view>
				<view v-if=" invoiceInfo.type === 2 &&invoiceInfo.bank && isopen" class="item acea-row row-between-wrapper">
					<view>开户银行</view>
					<view class="conter">{{invoiceInfo.bank}}</view>
				</view>
				<view v-if=" invoiceInfo.type === 2 &&invoiceInfo.card_number && isopen" class="item acea-row row-between-wrapper">
					<view>开户账号</view>
					<view class="conter">{{invoiceInfo.card_number}}</view>
				</view>
				
				<view class="item acea-row row-between-wrapper">
					<view>发票金额</view>
					<view class="conter">{{invoiceInfo.amount}}</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>备注</view>
					<view class="conter">{{invoiceInfo.remark?invoiceInfo.remark:'无'}}</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>申请时间</view>
					<view class="conter">{{invoiceInfo.add_time}}</view>
				</view>
				<block v-if=" invoiceInfo.type === 2">
					<view @click="openevent" v-if="!isopen" class="shousuobox" >
					   <text>展开更多信息</text>
					   <image class="arrow" src="../../../static/images/down_arrow.png" mode=""></image>
					</view>
					<view @click="openevent" v-else class="shousuobox">
					   <text>收起</text>
					   <image class="arrow" src="../../../static/images/up_arrow.png" mode=""></image>
					</view>
				</block>
			</view>
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper">
					<view class="item acea-row row-between-wrapper" @click="jumpinvicedetail">
						<view>
							<view class="">
								1张发票，含{{invoiceInfo.order.count}}个订单
							</view>
							<view class="" style="margin-top:10rpx;">
								{{invoiceInfo.order.time}}
							</view>
						</view>
						
						<view >
							<text>查看</text>
							<text class="iconfont icon-xiangyou right_arrow"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper">
					<view style="font-size:34rpx; margin-bottom:30rpx;">接收信息</view>
					<view class="item acea-row row-between-wrapper">
						<view>电子邮箱</view>
						<view class="conter">{{invoiceInfo.email}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-order">
			<view class="list">
				<checkbox-group @change="checkboxChange">
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<view >
						<view class="title acea-row row-between-wrapper" >
							<view class="acea-row row-middle">
								<text class="sign cart-color acea-row row-center-wrapper"
									v-if="item.bargain_id != 0">砍价</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.combination_id != 0">拼团</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.seckill_id != 0">秒杀</text>
								<text v-else>{{ item.module_type == 2 ? '门店' : '商城'}}</text>
								<text class="font-color-green"
									v-if="item.shipping_type == 2 && item.module_type == 1">-自提</text>
								<text
									style="font-size: 24rpx; color: #999; margin-left: 10rpx;">{{ item._add_time }}</text>
								<text class="gift" v-if="item.transfer_id > 0">礼物</text>
							</view>
						</view>
						<view class="item-info acea-row row-between row-top" v-for="(itemn, ind) in item.cartInfo"
							:key="ind">
							<view class="pictrue">
								<image :src="itemn.cart_info.productInfo.image" v-if="itemn.cart_info.productInfo"></image>
								<image :src="itemn.cart_info.image" v-else></image>
							</view>
							<view class="">
								<view class="text acea-row row-between" v-if="itemn.cart_info.productInfo">
									<view class="name line2">{{ itemn.cart_info.productInfo.store_name }}</view>
									<view class="money">
										<view v-if="itemn.cart_info.productInfo.attrInfo">
											￥{{ itemn.cart_info.productInfo.attrInfo.price }}</view>
										<view v-else>￥{{ itemn.cart_info.productInfo.price }}</view>
										<view>x{{ itemn.cart_num }}</view>
									</view>
								</view>
								<view class="text acea-row row-between" v-else style="margin-bottom: 30rpx;">
									<view class="name line2">{{ itemn.cart_info.title }}</view>
									<view class="money">
										<view v-if="itemn.cart_info.price">￥{{ itemn.cart_info.price }}</view>
										<view></view>
									</view>
								</view>
								<!-- 门店商品 -->
								<view v-if="itemn.cart_info.shopProductInfo && item.module_type == 2"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.shopAttrInfo.suk }}
								</view>
								<!-- 商城商品 -->
								<view v-if="itemn.cart_info.productInfo && item.module_type == 1"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.cart_info.productInfo.attrInfo.suk }}
								</view>
								<!-- 券包 -->
								<view class="acea-row row-between" style="font-size: 24rpx; color: #999;"
									v-if="item.module_type===3">
									<text>包含{{ itemn.cart_info.couponData.length }}张券</text>
									<text>共1件</text>
								</view>
							</view>
						</view>
						<view class="totalPrice">
							共{{ item.cartInfo.length || 0 }}件商品，总金额
							<text class="money font-color">￥{{ item.pay_price }}</text>
							<view class="">
		
								{{item.pay_type==="weixin"?'微信支付':item.pay_type==="yue"?'余额支付':'线下'}}
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			</view>
			<view class="" style="height:200rpx;">
				
			</view>
		</view>
		<home></home>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
	</view>
</template>


<script>
	import {
		getUserInfo,
		invoicedetails,
		orderinvoicelist
	} from '@/api/user.js';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			home,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				orderList:[],
				id: '',
				invoiceInfo: {},
				isClose: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				isopen:false
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.id = options.order_id

		},
		onShow() {
			if (this.isLogin) {
				this.getinvoicedetail()
				this.getUserInfo();
				// this.orderinvoicelist()
			} else {
				toLogin();
			}
		},
		onHide: function() {
			this.isClose = true;
		},
		onReady: function() {},
		methods: {
			// 查看发票订单
			jumpinvicedetail(){
				var id = this.id
				console.log(id)
				uni.navigateTo({
					url:`/pages/users/user_invoice_order_details/index?id=${id}`
				})
			},
			// 展开收缩信息
			openevent(){
				this.isopen = !this.isopen
			},
			// 获取发票订单商品列表
			async orderinvoicelist(){
				var data = {
					id: this.id
				}
				var res = await orderinvoicelist(data)
				this.orderList = res.data
				console.log(res,"订单里欸博爱")
			},
		   // 获取发票详情
			getinvoicedetail() {
				console.log(this.id, 99)
				var data = {
					id: this.id
				}
				console.log(data)
				invoicedetails(data).then(res => {
					console.log(res)
					this.invoiceInfo = res.data
				})
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 登录授权回调
			 * 
			 */
			onLoadFun: function() {
				this.getUserInfo();
			},
			/**
			 * 获取用户信息
			 * 
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.payMode[1].number = res.data.now_money;
					that.$set(that, 'payMode', that.payMode);
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.goodCall {
		color: #e93323;
		text-align: center;
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		line-height: 86rpx;
		background: #fff;

		.icon-kefu {
			font-size: 36rpx;
			margin-right: 15rpx;
		}

		/* #ifdef MP */
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			font-size: 30rpx;
			color: #e93323;
		}

		/* #endif */
	}

	.order-details .header {
		padding: 0 30rpx;
		height: 150rpx;
	}

	.order-details .header.on {
		background-color: #666 !important;
	}

	.order-details .header .iconfont {
		font-size: 70rpx;
		color: #fff;
	}

	.order-details .header .data {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-left: 27rpx;
	}

	.order-details .header .data.on {
		margin-left: 0;
	}

	.order-details .header .data .state {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}

	.order-details .header .data .time {
		margin-left: 20rpx;
	}

	.order-details .nav {
		background-color: #fff;
		font-size: 26rpx;
		color: #282828;
		padding: 25rpx 0;
	}

	.order-details .nav .navCon {
		padding: 0 40rpx;
	}

	.order-details .nav .on {
		color: #e93323;
	}

	.order-details .nav .progress {
		padding: 0 65rpx;
		margin-top: 10rpx;
	}

	.order-details .nav .progress .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #939390;
	}

	.order-details .nav .progress .iconfont {
		font-size: 25rpx;
		color: #939390;
		margin-top: -2rpx;
	}

	.order-details .address {
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}

	.order-details .address .name {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}

	.order-details .address .name .phone {
		margin-left: 40rpx;
	}

	.order-details .line {
		width: 100%;
		height: 3rpx;
	}

	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .wrapper {
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}

	.order-details .wrapper .item {
		font-size: 28rpx;
		color: #282828;
		width: 100%;
	}

	.order-details .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.order-details .wrapper .item .conter {
		color: #868686;
		width: 460rpx;
		text-align: left;
	}

	.order-details .wrapper .item .conter .copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 3rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}

	.order-details .wrapper .actualPay {
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}

	.order-details .wrapper .actualPay .money {
		font-weight: bold;
		font-size: 30rpx;
	}
.order-details .wrapper .shousuobox{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top:30rpx;
	font-size:24rpx;
	color:#aaa;
}
.order-details .wrapper .shousuobox .arrow{
	height:30rpx;width:30rpx;
	margin-left:20rpx;
}
	.order-details .footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.order-details .footer .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
	}

	.order-details .footer .bnt.cancel {
		color: #aaa;
		border: 1rpx solid #ddd;
	}

	.order-details .footer .bnt~.bnt {
		margin-left: 18rpx;
	}

	.order-details .writeOff {
		background-color: #fff;
		margin-top: 13rpx;
		padding-bottom: 30rpx;
	}

	.order-details .writeOff .title {
		font-size: 30rpx;
		color: #282828;
		height: 87rpx;
		border-bottom: 1px solid #f0f0f0;
		padding: 0 30rpx;
		line-height: 87rpx;
	}

	.order-details .writeOff .grayBg {
		background-color: #f2f5f7;
		width: 590rpx;
		height: 384rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin: 50rpx auto 0 auto;
		padding-top: 55rpx;
		position: relative;
	}

	.order-details .writeOff .grayBg .written {
		position: absolute;
		top: 0;
		right: 0;
		width: 60rpx;
		height: 60rpx;
	}

	.order-details .writeOff .grayBg .written image {
		width: 100%;
		height: 100%;
	}

	.order-details .writeOff .grayBg .pictrue {
		width: 290rpx;
		height: 290rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .grayBg .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .gear {
		width: 590rpx;
		height: 30rpx;
		margin: 0 auto;
	}

	.order-details .writeOff .gear image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.order-details .writeOff .num {
		background-color: #f0c34c;
		width: 590rpx;
		height: 84rpx;
		color: #282828;
		font-size: 48rpx;
		margin: 0 auto;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
		padding-top: 4rpx;
	}

	.order-details .writeOff .rules {
		margin: 46rpx 30rpx 0 30rpx;
		border-top: 1px solid #f0f0f0;
		padding-top: 10rpx;
	}

	.order-details .writeOff .rules .item {
		margin-top: 20rpx;
	}

	.order-details .writeOff .rules .item .rulesTitle {
		font-size: 28rpx;
		color: #282828;
	}

	.order-details .writeOff .rules .item .rulesTitle .iconfont {
		font-size: 30rpx;
		color: #333;
		margin-right: 8rpx;
		margin-top: 5rpx;
	}

	.order-details .writeOff .rules .item .info {
		font-size: 28rpx;
		color: #999;
		margin-top: 7rpx;
	}

	.order-details .writeOff .rules .item .info .time {
		margin-left: 20rpx;
	}

	.order-details .map {
		height: 86rpx;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 13rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.order-details .map .place {
		font-size: 26rpx;
		width: 176rpx;
		height: 50rpx;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.order-details .map .place .iconfont {
		font-size: 27rpx;
		height: 27rpx;
		line-height: 27rpx;
		margin: 2rpx 3rpx 0 0;
	}

	.order-details .address .name .iconfont {
		font-size: 34rpx;
		margin-left: 10rpx;
	}

	.refund {
		padding: 0 30rpx 30rpx;
		margin-top: 24rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333;
			height: 86rpx;
			border-bottom: 1px solid #f5f5f5;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.con {
			padding-top: 25rpx;
			font-size: 28rpx;
			color: #868686;
		}
	}
	
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
	}
	
	.font-color-green {
		color: #95c51b;
	}
	
	.font-color-gray {
		color: #999;
	}
	
	.my-order .header .picTxt {
		height: 190rpx;
	}
	
	.gift {
		background-color: #9AC83A;
		color: #fff;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
	
	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}
	
	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}
	
	.my-order .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}
	
	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}
	
	.my-order .nav {
		position: sticky;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		border-radius: 6rpx;
		margin: 0 auto 0 auto;
		z-index: 99;
	}
	
	.my-order .nav .item {
		display: flex;
		align-items: center;
		height: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		// padding: 27rpx 0;
		border-bottom: 5rpx solid transparent;
	}
	
	.my-order .nav .item.on {
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		/* #ifdef APP-PLUS */
		color: #000;
		/* #endif */
		border-color: #95c51b;
		color: #95c51b;
	}
	
	.my-order .nav .item .num {
		margin-top: 18rpx;
	}
	
	.my-order .list {
		width: 710rpx;
		margin: 14rpx auto 0 auto;
	}
	
	.my-order .list .item {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 14rpx;
		border: 1px solid #eee;
	}
	
	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
		justify-content: flex-start;
		
	}
	
	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 7rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
	
	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}
	
	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}
	
	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}
	
	.my-order .list .item .item-info .text {
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}
	
	.my-order .list .item .item-info .text .name {
		width: 306rpx;
		color: #282828;
	}
	
	.my-order .list .item .item-info .text .money {
		text-align: right;
	}
	
	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}
	
	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	
	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}
</style>
<style>
	.qs-btn {
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		padding: 0 3%;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
	}
</style>
